﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <title>jqxKnob API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
        <h2 class="documentation-top-header">Properties</h2>
        <table class="documentation-table">
            <tr>
                <th>Name
                </th>
                <th>Type
                </th>
                <th>Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>allowValueChangeOnClick</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the jqxKnob's value can be changed on click.                     
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>allowValueChangeOnClick</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({allowValueChangeOnClick: false });</code></pre>
                        <p>
                            Get the <code>allowValueChangeOnClick</code> property.
                        </p>
                        <pre><code>var allowValueChangeOnClick = $('#jqxKnob').jqxKnob('allowValueChangeOnClick');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-allowvaluechangeonclick-property">allowValueChangeOnClick is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>allowValueChangeOnDrag</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the jqxKnob's value can be changed by dragging the pointer.                     
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>allowValueChangeOnDrag</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({allowValueChangeOnDrag: false });</code></pre>
                        <p>
                            Get the <code>allowValueChangeOnDrag</code> property.
                        </p>
                        <pre><code>var allowValueChangeOnDrag = $('#jqxKnob').jqxKnob('allowValueChangeOnDrag');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-allowvaluechangeonclick-property">allowValueChangeOnDrag is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>allowValueChangeOnMouseWheel</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the jqxKnob's value can be changed on mouse wheel.                     
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>allowValueChangeOnMouseWheel</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({allowValueChangeOnMouseWheel: false });</code></pre>
                        <p>
                            Get the <code>allowValueChangeOnMouseWheel</code> property.
                        </p>
                        <pre><code>var allowValueChangeOnMouseWheel = $('#jqxKnob').jqxKnob('allowValueChangeOnMouseWheel');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-allowvaluechangeonclick-property">allowValueChangeOnMouseWheel is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>changing</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets a function called when the user drags the pointer. The function is called before the pointer is moved and the passed arguments are 2 - oldValue and newValue. If the function returns false, the value will not be changed.                    
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>changing</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({changing: function(oldValue, newValue){} });</code></pre>
                        <p>
                            Get the <code>changing</code> property.
                        </p>
                        <pre><code>var changing = $('#jqxKnob').jqxKnob('changing');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-changing-property">changing is set to function</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>dragEndAngle</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>0
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's angle where dragging the pointer will end.                   
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>dragEndAngle</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({dragEndAngle: 420 });</code></pre>
                        <p>
                            Get the <code>dragEndAngle</code> property.
                        </p>
                        <pre><code>var dragEndAngle = $('#jqxKnob').jqxKnob('dragEndAngle');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">dragEndAngle is set to 420</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>dragStartAngle</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>360
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's degrees where dragging the pointer can start.                    
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>dragStartAngle</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({dragStartAngle: 120 });</code></pre>
                        <p>
                            Get the <code>dragStartAngle</code> property.
                        </p>
                        <pre><code>var dragStartAngle = $('#jqxKnob').jqxKnob('dragStartAngle');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">dragStartAngle is set to 120</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the Knob is disabled.             
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>disabled</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({disabled: true });</code></pre>
                        <p>
                            Get the <code>disabled</code> property.
                        </p>
                        <pre><code>var disabled = $('#jqxKnob').jqxKnob('disabled');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-disabled-state">disabled is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>dial</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's dial.
                            <ul>
                                <li>innerRadius - specifies the inner Radius of the dial.</li>
                                <li>outerRadius - specifies the outer Radius of the dial.</li>
                                <li>style - specifies the style of the dial. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.</li>
                                <li>startAngle - dial's start angle(optional).</li>
                                <li>endAngle - dial's end angle(optional).</li>
                            </ul>
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>dial</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({dial: 360 });</code></pre>
                        <p>
                            Get the <code>dial</code> property.
                        </p>
                        <pre><code>var dial = $('#jqxKnob').jqxKnob('dial');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">dial is set to custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>endAngle</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>360
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's degrees offset for the 360 location.                    
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>endAngle</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({endAngle: 360 });</code></pre>
                        <p>
                            Get the <code>endAngle</code> property.
                        </p>
                        <pre><code>var endAngle = $('#jqxKnob').jqxKnob('endAngle');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">endAngle is set to 420</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>height</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>400
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's height.                 
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>height</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({height: 360 });</code></pre>
                        <p>
                            Get the <code>height</code> property.
                        </p>
                        <pre><code>var height = $('#jqxKnob').jqxKnob('height');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-width-and-height-properties">height is set to 400</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>labels</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's labels.
                            <ul>
                                <li>rotate - specifies if labels should be vertical or rotated with the appropriate angle.</li>
                                <li>offset - specifies the labels offset.</li>
                                <li>visible - determines the labels visibility.</li>
                                <li>step - sets the labels step.</li>
                                <li>formatFunction - function which can be used to format the labels.
                                    <br />
                                    Example:
                                    <pre><code>
formatFunction: function (label) {
    if (label == 0)
        return "Min";
    if (label == 100)
        return "Max";
    return label;
}
                                     </code></pre>
                                </li>
                                <li>style - specifies the style of the labels. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.</li>
                            </ul>
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>labels</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob({labels: {
    offset: '88%',
    step: 5,
    visible: true,
    formatFunction: function (label) {
        if (label == 0)
            return "Min";
        if (label == 100)
            return "Max";
        return label;
    }
});
                     </code></pre>
                        <p>
                            Get the <code>labels</code> property.
                        </p>
                        <pre><code>var labels = $('#jqxKnob').jqxKnob('labels');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">labels is set to custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>marks</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's marks.
                            <ul>
                                <li>colorProgress - hex color string.</li>
                                <li>colorRemaining - hex color string.</li>
                                <li>drawAboveProgressBar - draws the marks with z-index higher than the progress bar.</li>
                                <li>minorInterval - minor ticks interval.</li>
                                <li>majorInterval - major ticks interval.</li>
                                <li>majorSize - major tick's size. Specifies radius in case of circular lines, or length in case of lines.</li>
                                <li>offset - specifies the labels offset.</li>
                                <li>size - specifies radius in case of circular lines, or length in case of lines.</li>
                                <li>type - "circle" or "line".</li>
                                <li>thickness - specifies thickness in case of lines.</li>
                                <li>visible - determines the labels visibility.</li>
                            </ul>
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>marks</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob({marks: 
{
    colorRemaining: { color: 'grey', border: 'grey' },
    colorProgress: { color: '#a2da39', border: '#a2da39' },
    type: 'line',
    offset: '71%',
    thickness: 3,
    size: '6%',
    majorSize: '9%',
    majorInterval: 10,
    minorInterval: 2
});</code></pre>
                        <p>
                            Get the <code>marks</code> property.
                        </p>
                        <pre><code>var marks = $('#jqxKnob').jqxKnob('marks');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">marks is set to custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>min</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>0
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's min property.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>min</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob({min: 0});</code></pre>
                        <p>
                            Get the <code>min</code> property.
                        </p>
                        <pre><code>var min = $('#jqxKnob').jqxKnob('min');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">min is set to 0</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>max</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>100
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's max property.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>max</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob({max: 100});</code></pre>
                        <p>
                            Get the <code>max</code> property.
                        </p>
                        <pre><code>var max = $('#jqxKnob').jqxKnob('max');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">max is set to 100</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>progressBar</span>
                </td>
                <td>
                    <span>Object/Array of Objects</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's progressBar property.
                           <ul>
                               <li>offset - specifies the progress bar's offset.</li>
                               <li>style - specifies the style of the progressBar. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width, style.opacity - opacity values from 0 to 1</li>
                               <li>background - specifies the background style of the progressBar. background.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), background.strokeWidth - border width, background.opacity - opacity values from 0 to 1</li>
                               <li>size - specifies the progress bar's size.</li>
                               <li>ranges - array which specify the progress bar's ranges. object.startValue - range start value. range.endValue - range end value. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), object.stroke - border color(hex string), object.strokeWidth - border width, object.opacity - opacity values from 0 to 1</li>
                           </ul>
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>progressBar</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob({
  progressBar: {
    style: { fill: '#a2da39', stroke: 'grey' },
    size: '9%',
    offset: '60%',
    background: { fill: 'grey', stroke: 'grey' }
  }
});

</code></pre>
                        <p>
                            Get the <code>progressBar</code> property.
                        </p>
                        <pre><code>var progressBar = $('#jqxKnob').jqxKnob('progressBar');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">progressBar is set to custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>pointer</span>
                </td>
                <td>
                    <span>Object/Array of Objects</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's pointer property.
                            <ul>
                                <li>type - specifies the pointer's type - "circle", "line", "arrow".</li>
                                <li>style - specifies the style of the pointer. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.</li>
                                <li>size - specifies the pointer's size.</li>
                                <li>thickness - specifies the pointer's thickness.</li>
                                <li>visible - specifies whether the pointer is visible.</li>
                            </ul>
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>pointer</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob({pointer:
  { type: 'arrow', style: { fill: '#a2da39', stroke: 'grey' }, size: '59%', offset: '49%', thickness: 20 }}
);

</code></pre>
                        <p>
                            Get the <code>pointer</code> property.
                        </p>
                        <pre><code>var pointer = $('#jqxKnob').jqxKnob('pointer');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">pointer is set to custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>pointerGrabAction</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>"normal"
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's pointerGrabAction property("normal", "progressBar", "pointer").
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>pointerGrabAction</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob(
  {pointerGrabAction: "pointer"}
);

</code></pre>
                        <p>
                            Get the <code>pointerGrabAction</code> property.
                        </p>
                        <pre><code>var pointerGrabAction = $('#jqxKnob').jqxKnob('pointerGrabAction');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">pointerGrabAction is set to "normal"</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span24'>rotation</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>"clockwise"
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's rotation("clockwise" or "counterclockwise").
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>rotation</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob(
  {rotation: "counterclockwise"}
);

</code></pre>
                        <p>
                            Get the <code>rotation</code> property.
                        </p>
                        <pre><code>var rotation = $('#jqxKnob').jqxKnob('rotation');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-rotation-property">rotation is set to "counterclockwise"</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span25'>startAngle</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>0
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's degrees offset for the 0 location.                    
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>startAngle</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({startAngle: 120 });</code></pre>
                        <p>
                            Get the <code>startAngle</code> property.
                        </p>
                        <pre><code>var startAngle = $('#jqxKnob').jqxKnob('startAngle');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">startAngle is set to 120</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>spinner</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets Knob's spinner.
                            <ul>
                                <li>innerRadius - specifies the inner Radius of the spinner.</li>
                                <li>outerRadius - specifies the outer Radius of the spinner.</li>
                                <li>style - specifies the style of the spinner. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.</li>

                                <li>marks -
                            <ul>
                                <li>rotate - sets whether spinner marks rotate with pointer.</li>
                                <li>colorProgress - hex color string.</li>
                                <li>colorRemaining - hex color string.</li>
                                <li>drawAboveProgressBar - draws the marks with z-index higher than the progress bar.</li>
                                <li>minorInterval - minor ticks interval.</li>
                                <li>majorInterval - major ticks interval.</li>
                                <li>majorSize - major tick's size. Specifies radius in case of circular lines, or length in case of lines.</li>
                                <li>offset - specifies the labels offset.</li>
                                <li>size - specifies radius in case of circular lines, or length in case of lines.</li>
                                <li>type - "circle" or "line".</li>
                                <li>thickness - specifies thickness in case of lines.</li>
                                <li>visible - determines the labels visibility.</li>
                            </ul>
                                </li>
                            </ul>
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>spinner</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob({spinner:
{
    style: { fill: { color: '#00a4e1', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] }, stroke: '#00a4e1' },
    innerRadius: '45%', // specifies the inner Radius of the dial
    outerRadius: '60%', // specifies the outer Radius of the dial
    marks: {
        colorRemaining: '#fff',
        colorProgress: '#fff',
        type: 'line',
        offset: '46%',
        thickness: 2,
        size: '14%',
        majorSize: '14%',
        majorInterval: 10,
        minorInterval: 10
    }
                
});</code></pre>
                        <p>
                            Get the <code>spinner</code> property.
                        </p>
                        <pre><code>var spinner = $('#jqxKnob').jqxKnob('spinner');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-spinner-property">spinner is set to custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span28'>style</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's background style.     
                            <ul>
                                <li>fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]])</li>
                                <li>stroke - border color(hex string).</li>
                                <li>strokeWidth - border width.</li>
                            </ul>
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>style</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({style: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } } });</code></pre>
                        <p>
                            Get the <code>style</code> property.
                        </p>
                        <pre><code>var style = $('#jqxKnob').jqxKnob('style');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">style is set to custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            			<tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>step</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>1
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's step property. Specifies the increase/decrease step.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>step</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({step: 2});</code></pre>
                        <p>
                            Get the <code>step</code> property.
                        </p>
                        <pre><code>var step = $('#jqxKnob').jqxKnob('step');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-step-property">step is set to 10</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span29'>snapToStep</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's snapToStep property. Specifies whether setting the knob value will snap to the closest step true/false.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>snapToStep</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({snapToStep: true});</code></pre>
                        <p>
                            Get the <code>snapToStep</code> property.
                        </p>
                        <pre><code>var snapToStep = $('#jqxKnob').jqxKnob('snapToStep');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">snapToStep is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span30'>value</span>
                </td>
                <td>
                    <span>Number/Array of Numbers</span>
                </td>
                <td>0
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's value.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>value</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({value: 23});</code></pre>
                        <p>
                            Get the <code>value</code> property.
                        </p>
                        <pre><code>var value = $('#jqxKnob').jqxKnob('value');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-spinner-property">value is set to 60</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span31'>width</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>400
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's width.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>width</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({width: 400});</code></pre>
                        <p>
                            Get the <code>width</code> property.
                        </p>
                        <pre><code>var width = $('#jqxKnob').jqxKnob('width');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-width-and-height-properties">width is set to 400</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">Events</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>change</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the value is changed. 
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Bind to the <code>change</code> event by type: jqxKnob.
                        </p>
                        <pre><code>$('#jqxKnob').on('change', 
function (event) {var args = event.args; var value = args.value; var changeSource = args.changeSource; // "pointerMove", "increment", "decrement", "val", "propertyChange" }); 
                         </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-change-event">Bind to the change event by type: jqxKnob.</a>
                        </div>
                    </div>
                </td>
            </tr>
         
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">Methods</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span68'>destroy</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Destroys the widget.
                        </p>
                        <div class="methodArgs">
                            <table class="arguments">
                                <tbody>
                                    <tr>
                                        <th>Parameter</th>
                                        <th>Type</th>
                                        <th>Description</th>
                                    </tr>
                                    <tr>
                                        <td><em>None</em></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                            <strong>Return Value</strong><br />
                            <em>None</em>
                        </div>
                        <h4>Code examples</h4>
                        <p>
                            Invoke the <code>destroy</code> method.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob('destroy'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-destroy-method">destroys the jqxKnob</a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>val</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the value.
                        </p>
                        <div class="methodArgs">
                            <table class="arguments">
                                <tbody>
                                    <tr>
                                        <th>Parameter</th>
                                        <th>Type</th>
                                        <th>Description</th>
                                    </tr>
                                    <tr>
                                        <td><em>value</em></td>
                                        <td>String</td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                            <strong>Return Value</strong><br />
                            <em>String</em>
                        </div>
                        <h4>Code examples</h4>
                        <p>
                            Get the <code>value</code>:
                        </p>
                        <pre><code>var value = $('#jqxKnob').jqxKnob('val'); or var value = $('#jqxKnob').val();</code></pre>
                        <p>
                            Set the <code>value</code>:
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob('val', 50); or $('#jqxKnob').val(50);</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-val-method">sets the jqxKnob value</a>
                        </div>
                    </div>
                </td>
            </tr>

        </table>
        <br />
    </div>
</body>
</html>
